<template>
	<view>
		<view class="status-height"></view>
		<view class="" >
			<!-- 顶部管理切换 -->
			<view class="height-88 c-bg-bule">
				<text class="text-white cuIcon-back c-back-btn" @tap="historyBack()"></text>
				<view class="header-view">
					<!-- 
					<text class=" pf-bold pf-active" @tap="switchManage">商品管理</text>
					<text class=" pf-bold" @tap="switchManage">分组管理</text> -->
					<text v-for="(menu,i) in manageMenu" :key="i" :class="menuCurrent == i?'pf-bold pf-active':'pf-bold'" @tap="switchManage(i)">{{menu}}</text>
				</view>
			</view>
			<!-- end顶部管理切换 -->
			<!-- 商品搜索框 -->
			<view class="shop-manage" v-show="shopManage">
				<view class="example-body" v-show="shopManage">
					<uni-search-bar radius="100" focus="true" v-model="ipt" clearButton="auto" @confirm="searchNow($event)" />
					<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#007aff" @clickItem="onClickItem" />
				</view>
				<!-- end商品搜索框 -->
				<view class="content">
					<!-- 出售中商品列表 -->
					<view v-show="current === 0">
						<view class="shop-lists-container">
							<view class="" v-for="(item,index) in shoplist" :key=item.id>
								<view class="shop-lists">
									<view>
										<checkbox-group class="block" @change="checkboxChange(index)">
											<checkbox class='round blue narrow-seven' :class="item.checked ?'checked':''" :checked="item.checked?true:false" :value="item.shopNum"></checkbox>
										</checkbox-group>
									</view>
									<view class="">
										<image src="../../../../static/emptyCart.jpg" mode=""></image>
									</view>
									<view class="shop-message">
										<view>商品编号:<text>{{item.shopNum}}</text></view>
										<view class="shop-message-title">{{item.title}}</view>
										<view><text style="font-size: 24upx;color: #2675F5;flex: 2;">￥{{item.price}}</text><text style="font-size: 20upx;margin-left: 10upx;flex: 9;">库存:{{item.stork}}</text>
											<uni-badge text="· · ·" type="primary" size="small" style="flex: 2;font-size: 30upx;padding: 0;text-align: center;" />
										</view>
									</view>
								</view>
								<view class="select-show" v-show="item.checked ?true:false">
									<view class="example-body">
										<view @tap="lowerShelf(item.id)">
											<uni-icons type="download" size="22" color="#10AEFF" />
											<text style="margin-left: 6upx;">下架</text>
										</view>
										<view @tap="navTo('editGroup?id='+item.id)">
											<uni-icons type="chatboxes" size="22" color="#3DBC3B" />
											<text style="margin-left: 6upx;">分组</text>
										</view>
										<view>
											<uni-icons type="compose" size="22" color="#F59126" />
											<text style="margin-left: 6upx;">编辑</text>
										</view>
										<view>
											<uni-icons type="arrowthinup" size="22" color="#E4423F" />
											<text style="margin-left: 6upx;">置顶</text>
										</view>
									</view>
								</view>
								
							</view>
							<view class="select-show select-show-all" v-show="selectAllShow">
								<view class="example-body">
									<view class="">
										<radio value="" :checked="selectedAll" @tap="selectAll" class="narrow-seven"></radio><text style="margin-left: 20upx;">全选</text>
									</view>
									<view>
										<view class="allDown" @tap="lowerShelf('all')">
											<uni-icons type="download" size="22" color="#2675F5" />
											<text style="margin-left: 6upx;">下架</text>
										</view>
										<view  class="allChatbox">
											<uni-icons type="chatboxes" size="22" color="#fff"/>
											<text style="margin-left: 6upx;">调整分组</text>
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
					<!-- end出售中商品列表 -->
					<view v-show="current === 1">
						哈哈哈哈
					</view>
					<view v-show="current === 2">选项卡3的内容</view>
				</view>
			</view>
			<!-- 分组管理页面 -->
			<view class="group-manage" v-show="groupManage">
				<view v-for="(item,i) in grouplist" :key="item.id">
					<!-- 一级主分组 -->
					<view class="cu-bar bg-white solid-bottom cu-bar-showhidden" @tap="secondShow(i)">
						<view class="action">
								<text class="cuIcon-titles text-blue"></text><text>{{item.groupTitle}}</text>
								
						</view>
						<view class="group-manage-total" v-if="groupBool">
							<text>12</text>
						</view>
						<view v-if="!groupBool" @tap.stop class="Operation-grouping">
							<view><uni-icons type="arrowthinup" size="25" color="#3c3c3c"/></view>
							<view  @tap="showModal" data-target="updateFirstGroup" :data-value = "item.groupTitle" :data-id="item.id"><uni-icons type="compose" size="25" color="#3c3c3c"/></view>
							<view @tap = "delFirGroup(item.id)"><uni-icons type="trash" size="25" color="#3c3c3c"/></view>
						</view>
					</view>
					<!-- 二级子分组 -->
					<view v-show="item.checked?true:false">
						<view class="cu-second-bar bg-white solid-bottom cu-bar-showhidden" v-for="secItem in item.second" :key="secItem.id">
							<view class="action">
								<text style="margin-left: 50upx;">{{secItem.secTitle}}</text>
							</view>
							<view class="group-manage-total" v-if="groupBool">
								<text>12</text>
							</view>
							<view v-if="!groupBool" @tap.stop class="Operation-grouping">
								<view>
									<uni-icons type="arrowthinup" size="25" color="#3c3c3c"/>
								</view>
								<view  @tap="showModal" data-target="updateSecGroup" :data-value="secItem.secTitle" :data-id = "secItem.id">
									<uni-icons type="compose" size="25" color="#3c3c3c"/>
								</view>
								<view @tap = "delSecGroup(secItem.id)">
									<uni-icons type="trash" size="25" color="#3c3c3c"/>
								</view>
							</view>
						</view>
						<view class="add-secondTitle" v-show="!groupBool"  @tap="showModal" data-target="addSecGroup">
							<uni-icons type="plus" size="18" color="#5C99FA"/>
							<text style="margin-left: 6upx;">添加子分组</text>
						</view>
					</view>
				</view>
				<view class="group-manage-bottom" v-show="groupBool" @click="groupBool = !groupBool">
					<view  class="allChatbox">
						<uni-icons type="list" size="22" color="#2675F5"/>
						<text style="margin-left: 6upx;">分组管理</text>
					</view>
				</view>
				<!-- 点击上面分组管理才显示 -->
				<view class="group-manage-bottom-update" v-show="!groupBool">
					<view class="cu-bar bg-white solid-bottom shadow" @tap="showModal" data-target="addFirstGroup">
						<view class="action">
							<uni-icons type="plusempty" size="25" color="#2675F5"/><text>新增分组</text>
						</view>
					</view>
					<view class="cu-bar bg-blue solid-bottom" @click="groupBool = !groupBool">
						<view class="action">
							<text>完成</text>
						</view>
					</view>
				</view>
	<!-- 模态框start============================================================================================================================ -->
				<!-- 新建分组和重命名分组模态框 -->
				<view class="cu-modal" :class="firstGroup=='addFirstGroup'?'show':''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">新建分组</view>
						</view>
						<view class="padding-xl">
							<input type="text" value="" placeholder="请输入..." v-model="addFirVal"/>
						</view>
						<view class="cu-bar bg-white justify-center">
							<view class="action">
								<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
								<button class="cu-btn bg-blue margin-left" data-target="addFirstGroup" @tap="hideModal">确定</button>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-modal" :class="firGroupUpdate=='updateFirstGroup'?'show':''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">重命名分组</view>
						</view>
						<view class="padding-xl">
							<input type="text" value="" placeholder="请输入..." v-model="updateFirVal"/>
						</view>
						<view class="cu-bar bg-white justify-center">
							<view class="action">
								<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
								<button class="cu-btn bg-blue margin-left" data-target="updateFirstGroup" @tap="hideModal">确定</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 新建子分组和修改子分组模态框 -->
				<view class="cu-modal" :class="secondGroup=='addSecGroup'?'show':''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">添加子分组</view>
						</view>
						<view class="padding-xl">
							<input type="text" value="" placeholder="请输入..." v-model="addSecoVal"/>
						</view>
						<view class="cu-bar bg-white justify-center">
							<view class="action">
								<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
								<button class="cu-btn bg-blue margin-left" @tap="hideModal" data-target="addSecGroup">确定</button>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-modal" :class="secGroupUpdate=='updateSecGroup'?'show':''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white justify-end">
							<view class="content">重命名子分组</view>
						</view>
						<view class="padding-xl">
							<input type="text" value="" placeholder="请输入..." v-model="updateSecVal"/>
						</view>
						<view class="cu-bar bg-white justify-center">
							<view class="action">
								<button class="cu-btn line-blue text-blue" @tap="hideModal">取消</button>
								<button class="cu-btn bg-blue margin-left" data-target="updateSecGroup" @tap="hideModal">确定</button>
							</view>
						</view>
					</view>
				</view>
	<!-- 模态框end========================================================================================================================================== -->
			</view>
		</view>

	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	export default {
		components: {
			uniSearchBar,
			uniSegmentedControl,
			uniBadge,
			uniIcons
		},
		data() {
			return {
				manageMenu: ["商品管理", "分组管理"],
				menuCurrent: 0,
				shopManage: true,
				groupManage: false,
				ipt: '', // 输入框输入的值
				items: ['出售中', '仓库中', '已售罄'], //选项卡
				current: 0, //选项卡下标
				selectAllShow:false,  //是否显示全选框
				selectedAll:false,//全选框
				//商品列表数据
				shoplist: [{
						id: 1,
						imgUrl: "../../../../static/emptyCart.jpg",
						shopNum: "12345",
						title: "我食标题标题标题健康的洒家扩大了多久鲁大师角动量喀什",
						price: "123.00",
						stork: "9999",
						checked: false
					},
					{
						id: 2,
						imgUrl: "../../../../static/emptyCart.jpg",
						shopNum: "12345",
						title: "我食标题标题标题健康的洒家扩大了多久鲁大师角动量喀什",
						price: "123.00",
						stork: "9999",
						checked: false
					},
					{
						id: 3,
						imgUrl: "../../../../static/emptyCart.jpg",
						shopNum: "12345",
						title: "我食标题标题标题健康的洒家扩大了多久鲁大师角动量喀什",
						price: "123.00",
						stork: "9999",
						checked: false
					}
				],
				//分组管理
				groupBool:true,
				firstGroup: null,		//添加一级分组模态框
				addSecoVal:"",			//添加一级分组值
				firGroupUpdate: null,	//修改一级分组模态框
				updateFirId:"",			//修改一级分组ID
				updateFirVal:"",		//修改一级分组值
				
				secondGroup:null,		//添加二级分组模态框
				addFirVal:"",			//添加二级分组值
				secGroupUpdate:null,	//修改一级分组模态框
				updateSecId:"",			//修改二级分组ID
				updateSecVal:"",		//修改二级分组值
				grouplist: [
				{
					checked: false,
					id: 1,
					groupTitle: "分组1",
					second: [{
						id: 1,
						secTitle: "二级1"
					}, {
						id: 2,
						secTitle: "二级2"
					}]
				}, 
				{
					checked: false,
					id: 2,
					groupTitle: "分组2",
					second: [{
						id: 1,
						secTitle: "二级1"
					}]
					
				}, 
				{
					checked: false,
					id: 3,
					groupTitle: "分组3",
					second: []
				},
				]
			}
		},

		methods: {
			test(e){
				console.log(e)
				console.log(1)	
			},
			// 跳转路径函数
			navTo(url) {
				
				uni.navigateTo({
					url
				})
			},
			//返回上一页
			historyBack() {
				uni.navigateBack()
			},
			//切换管理页面
			switchManage(current) {
				this.menuCurrent = current
				if (this.menuCurrent == 0) {
					this.shopManage = true
					this.groupManage = false
				} else {
					this.shopManage = false
					this.groupManage = true
				}
			},
			//切换选项卡
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
			},
			//搜索框功能
			searchNow(e) {
				console.log(e)
				if (this.ipt == '') {
					uni.showToast({
						title: '未输入搜索关键字',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
			},
			//商品列表
			checkboxChange(index) {
				let shoplist = this.shoplist
				shoplist[index].checked = !shoplist[index].checked;
				this.selectAllShow = true;
				
			},
			//全选中商品
			selectAll(){
				this.selectedAll = !this.selectedAll
				let shoplist = this.shoplist
				let selectedAll = this.selectedAll
				console.log(shoplist)
				if(selectedAll==true){
					for (let i = 0; i < shoplist.length; i++) {
						shoplist[i].checked = true
					}
				}else{
					for (let i = 0; i < shoplist.length; i++) {
						shoplist[i].checked = false
					}
				}
			},
			// 下架商品
			lowerShelf(id){
				let selectListId = this.shoplist
				let listArrId = []
				for (let i = 0; i < selectListId.length; i++) {
					if(selectListId[i].checked == true){
						listArrId.push(selectListId[i].id)
					}
				}
				id=="all"?id=listArrId:id=[id]
				uni.showModal({
					content: '确定下架该商品?',
					success: function (res) {
						if (res.confirm) {
							console.log(id)
						} else if (res.cancel) {
							console.log(2)
						}
					}
				})
			},
			//分组管理页面
			//点击一级显示二级分组
			secondShow(index){
				this.grouplist[index].checked = !this.grouplist[index].checked
			},
			// 模态框操作
			showModal(e) {
				console.log(e)
				switch(e.currentTarget.dataset.target){
					case "addFirstGroup":
					this.firstGroup = e.currentTarget.dataset.target
					break;
					case "addSecGroup":
					this.secondGroup = e.currentTarget.dataset.target
					break;
					case "updateFirstGroup":
					this.firGroupUpdate = e.currentTarget.dataset.target
					this.updateFirVal = e.currentTarget.dataset.value
					this.updateFirId = e.currentTarget.dataset.id
					break;
					case "updateSecGroup":
					this.secGroupUpdate = e.currentTarget.dataset.target
					this.updateSecVal = e.currentTarget.dataset.value
					this.updateSecId = e.currentTarget.dataset.id
					break;
				}
			},
			hideModal(e) {
				console.log(e)
				switch(e.currentTarget.dataset.target){
					case undefined:
						this.firstGroup = null
						this.secondGroup = null
						this.firGroupUpdate = null
						this.secGroupUpdate = null
					break;
					case "addFirstGroup":
						console.log("addFirstGroup添加主分组")
						console.log(this.addFirVal)
					break;
					case "updateFirstGroup":
					console.log(this.updateFirId+"一级分组ID")
					console.log("updateFirstGroup重命名分组")
					break;
					case "addSecGroup":
						console.log("addSecGroup添加子分组")
						console.log(this.addSecoVal)
					break;
					case "updateSecGroup":
					console.log(this.updateSecId+"二级分组ID")
					console.log("updateSecGroup重命名子分组")
					break;
				}
			},
			// 模态框操作结束
			delFirGroup(id){
				console.log(id)
				uni.showModal({
					content: '确定删除该分组?',
					success: function (res) {
						if (res.confirm) {
							console.log(id)
						} else if (res.cancel) {
							console.log(2)
						}
					}
				})
			},
			delSecGroup(id){
				console.log(id)
				uni.showModal({
					content: '确定删除该分组?',
					success: function (res) {
						if (res.confirm) {
							console.log(id)
						} else if (res.cancel) {
							console.log(2)
						}
					}
				})
			}
		}
	}
</script>

<style>
	.height-88 {
		height: 88upx;
	}

	.c-bg-bule {
		background-color: #2675F5;
	}

	.top-30 {
		margin-top: 60upx !important;
		margin-left: 296upx !important;
	}

	.c-back-btn {
		position: absolute;
		font-size: 54upx;
		margin-left: 20upx;
	}

	.pf-bold {
		color: #F4F4F4;
		font-size: 32upx;
		border: 2upx solid #fff;
		font-family: PingFang-SC-Bold, PingFang-SC;
		margin-top: 20upx;
		padding: 0 10upx;
	}

	.pf-active {
		background: #fff;
		color: #2675F5;
	}

	.header-view {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.example-body {
		background: #fff;
	}
	/* 商品列表 */
	.shop-lists {
		padding: 16upx 40upx 20upx;
		height: 160upx;
		width: 100%;
		background: #fff;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		color: #7c7c7c;
	}

	.shop-lists .shop-message {
		margin-left: 10upx;
	}
	.shop-lists .shop-message-title{
		overflow: hidden;text-overflow: ellipsis; white-space: nowrap;width: 492upx;
	}
	.shop-lists .shop-message view:last-child {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-lists image {
		width: 120upx;
		height: 120upx;
		margin-left: 20upx;
	}
	
	.select-show {
		height: 84upx;
		width: 100%;
		background: #fff;
	}

	.select-show>view {
		margin-left: 20upx;
		margin-right: 20upx;
		height: 100%;
		width: auto;
		padding: 22upx 36upx 20upx 64upx;
		border-top: 2upx solid #DFDFDF;
		display: flex;
		align-items: center;
		justify-content: space-between
	}
	.select-show-all{
		height: 92upx;
		position: absolute;
		bottom: 0;
	}
	.select-show-all>view.example-body{
		border: none;
		padding:22upx 0upx 20upx 20upx
	}
	.select-show-all>view.example-body>view{
		display: flex;
		justify-content: space-between;
		color: #7c7c7c;
	}
	.select-show-all>view.example-body .allDown{
		border-radius: 100upx;
		width: 168upx;
		border: 2upx solid #2675F5;
		color: #2675F5;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20upx;
	}
	.select-show-all>view.example-body .allChatbox{
		border-radius: 100upx;
		width: 214upx;
		background: #2675F5;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* 分组管理 */
	.group-manage {
		padding: 10upx 20upx 0;
	}
	.group-manage .Operation-grouping{display: flex;justify-content: center;}
	.group-manage .group-manage-total{margin-right: 30upx;}
	.group-manage .cu-bar {
		margin: 20upx 0;
	}
	.group-manage .cu-second-bar{margin: 20upx 0;height: 88upx;display: flex;align-items: center;}
	.group-manage-bottom{width: 100%;background: #fff;height: 100upx;position: absolute;bottom: 0;display: flex;align-items: center;padding: 0;left: 0;justify-content: center;}
	.group-manage-bottom-update{position: absolute;bottom: 10upx;width: 100%;left: 0;padding: 0 20upx;}
	.group-manage-bottom-update>view{display: flex;justify-content: center;}
	.add-secondTitle{display: flex;justify-content: flex-end;align-items: center;color: #5C99FA;}
	.cu-bar-showhidden{display: flex;justify-content: space-between;}
	.cu-bar-showhidden>view .uni-icon{margin:0 20upx;}
	/* 弹出的模态框样式 */
	.cu-modal .cu-bar{margin: 0;}
	.cu-dialog .padding-xl{background: #fff;}
	.cu-dialog .padding-xl input{background: #F7F7F7;height: 60upx;}
	/*自定义样式*/
	/* reg	  */
	uni-checkbox-group {
		width: 52upx !important;
	}
	/* 选择框缩小0.7倍 */
	.narrow-seven{transform:scale(0.7)}
	
</style>
